<template>
  <div style="width: 100%; height: 100%; position: relative">
    <div id="lineEcharts" style="width: 100%; height: 100%"></div>
    <div class="month-box">
      <a-range-picker
        style="width: 200px"
        size="small"
        @change="handleonChange"
      >
        <a-icon slot="suffixIcon" type="calendar" />
      </a-range-picker>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dates: ["本月"],
      date: "",
      // myChart:{}
      options: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        color: "#fff",
        legend: {
          show: false,
        },
        grid: {
          left: "1%",
          right: "1%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
            axisTick: { show: false },
            axisLine: { show: false },
            axisLabel: {
              color: "#303133",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              formatter: (val) => {
                var vals;
                if (val > 10000) {
                  vals = (val / 10000).toFixed(0) + "万";
                } else {
                  vals = val;
                }
                return `${vals}`;
              },
            },
          },
        ],
        series: [
          {
            name: "搜索引擎",
            type: "line",
            stack: "总量",
            areaStyle: {
              color: {
                type: "linear",
                x: 1,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#D0F0FE", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(255,255,255,0)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            lineStyle: {
              color: "#50CDFF",
            },
            symbol: "circle", // 设置标记的图形为circle
            symbolSize: "6",
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 2,
              shadowBlur: 0,
              color: "#50CDFF",
            },
            data: [82000, 93200, 90001, 90034, 129000, 133000, 130020],
          },
        ],
      },
    };
  },
  mounted() {
    let _this = this;
    let myChart = _this.$echarts.init(document.getElementById("lineEcharts"));
    let time;
    this.$nextTick(function () {
      time = setTimeout(() => {
        myChart.resize();
      }, 0);
      myChart.setOption(this.options);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    });
    clearTimeout(time);
  },
  methods: {
    handleonChange(val, option) {
      console.log(val, option);
    },
  },
};
</script>

<style lang="less" scoped>
.month-box {
  z-index: 1000;
  position: absolute;
  top: 5px;
  right: 0;
  font-size: 14px !important;
}
</style>
